<template>
  <a-card :bordered="false">
    <a-spin :spinning="spinning != 0">
      <a-layout>
        <a-layout-sider style="background-color: white;">
          <a-card style="min-height: 300px; overflow: auto;" :bordered="false">
            <market-group @select="showGroup" :list="marketGroup" :groupId="groupId"></market-group>
          </a-card>
        </a-layout-sider>
        <a-layout>
          <a-card style="min-height: 300px; overflow: auto;" :bordered="false">
            <market-list @select="showInfo" @doData="selectedMarket" :list="marketList"
                         :groupId="groupId" :currentCodeList="currentCodeList"></market-list>
          </a-card>
        </a-layout>
      </a-layout>
    </a-spin>

    <market-info-dialog ref="info" :record="record" :currentCodeList="currentCodeList"
                        @ok="selectedMarket"></market-info-dialog>
  </a-card>
</template>

<script>

  import { queryMarketList, queryMarketGroupList, installationApp, updateApp, queryAppList } from '@/api/api'
  import MarketInfoDialog from './MarketInfoDialog'
  import MarketGroup from './MarketGroup'
  import MarketList from './MarketList'

  export default {
    name: 'MarketPage',
    components: {
      MarketInfoDialog,
      MarketGroup,
      MarketList
    },
    data() {
      return {
        spinning: 0,
        marketList: [],
        marketGroup: [],
        currentCodeList: [],
        record: {},
        groupId: null
      }
    },
    created() {
      this.init()
      this.initCurrentCodeList()
    },
    methods: {
      init() {
        //应用列表
        this.spinning++
        queryMarketList(bootConfig[process.env.NODE_ENV].VUE_APP_MKT_URL).then((res) => {
          if (res.success) {
            this.marketList = res.result
          } else {
            this.messageUtil.warning(res.message)
          }
        }).catch(() => {
          this.messageUtil.error('获取信息失败')
        }).finally(() => {
          this.spinning--
        })

        //分类
        this.spinning++
        queryMarketGroupList(bootConfig[process.env.NODE_ENV].VUE_APP_MKT_URL).then((res) => {
          if (res.success) {
            this.marketGroup = res.result
          } else {
            this.messageUtil.warning(res.message)
          }
        }).catch(() => {
          this.messageUtil.error('获取信息失败')
        }).finally(() => {
          this.spinning--
        })
      },
      initCurrentCodeList() {
        this.spinning++
        queryAppList().then((res) => {
          if (res.success) {
            this.currentCodeList = res.result
          } else {
            this.messageUtil.warning(res.message)
          }
        }).catch(() => {
          this.messageUtil.error('获取信息失败')
        }).finally(() => {
          this.spinning--
        })
      },
      showInfo(record) {
        this.record = record
        this.$refs.info.visible = true
      },
      showGroup(groupId) {
        this.groupId = groupId || null
      },
      selectedMarket(record) {
        if (record) {
          this.record = record
        }
        if (this.currentCodeList.indexOf(this.record.code) == -1) {
          //安装
          this.doUpdate(installationApp)
        } else {
          //更新
          this.doUpdate(updateApp)
        }
      },
      doUpdate(api) {
        this.spinning++
        api(this.record).then((res) => {
          if (res.success) {
            this.messageUtil.success(res.message)
          } else {
            this.messageUtil.warning(res.message)
          }
          this.initCurrentCodeList()
        }).catch(() => {
          this.messageUtil.error('操作失败')
        }).finally(() => {
          this.spinning--
        })
      }
    }
  }
</script>
